<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期联动下拉列</title>
    <script>
        function loadDate() {
            // 加载年份
            let year = document.getElementById("year");
            // 获取当前年份
            let currentYear = new Date().getFullYear();
            for (let i = currentYear - 30; i <= currentYear; i++) {
                year[year.length] = new Option(i + "年", i);
            }

            // 加载月份
            let month = document.getElementById("month");
            for (let i = 1; i <= 12; i++) {
                month[month.length] = new Option(i + "月", i);
            }
        }

        function loadDay(){
            // 根据已选择的年份与月份的值,加载出对应的天数
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;
            let day = document.getElementById("day");
            // 加载之前,清除原有的数据,保留初始选项
            day.length = 1;

            // 只有当年份的值与月份的值是合法的值的时候,才需要加载
            // 如果两者有任意一个值为-1,则说明尚未选择完成,无需加载
            if(year == -1 || month == -1){
                return;
            }

            // 根据年份与月份的值,计算这一年这个月共有多少天
            let countDay = new Date(year,month,0).getDate();
            for(let i = 1; i<= countDay; i++){
                day[day.length] = new Option(i+"日",i);
            }
        }
    </script>
</head>
<!--
    onload:页面加载事件,在页面加载时调用loadDate方法
-->
<body onload="loadDate()">
<!--
    需求一:当页面加载之后自动加载年份与月份
    要求:
        1.年份为当前年份的前三十年
        2.月份固定为1-12月
    需求二:当用户选择了有效的年份或者月份之后加载对应的天数
        根据指定年份与月份生成与之对应的天数,考虑闰年
-->
<select id="year" onchange="loadDay()">
    <option value="-1">--年--</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">--月--</option>
</select>
<select id="day">
    <option value="-1">--日--</option>
</select>
</body>
</html>